<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../static/layui/css/layui.css">
		<script src="../static/layui/layui.js"></script>
		
		<style type="text/css">
		    .box{
		        background: #eee;
		        padding: 10px 0;
		        white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
		        overflow-y:auto;/*可滑动*/
		    }
		    /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
		    .box::-webkit-scrollbar{
		        display: none;
		    }
		    .box1{
		        width: 21%;
				height: 300px;
		        margin-left: 3%;
		        background: #fff;
		        display: inline-block;/*行内块元素*/
				
		    }
			.goodsimg{
				text-align: center;
			}
			.box1 img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div style="text-align: center;">
			<h1><b>热门商品</b></h1>
		</div>
		<div style="text-align: center;">
			<select style="width: 100px;height: 50px;border: 0;">
				<option value="value" disabled selected hidden>排序方式（降序）</option>
				<option>起拍价格</option>
				<option>报名人数</option>
				<option>今日拍卖</option>
			</select>
		</div>
		<div style="width: 100%;height: 300px;">
			<div style="float: left;margin-left: 500px;">
				<a href=""><img style="width: 300px;height: 300px;" src="../static/images/img/shoes1.jpg"/></a>
			</div>
			
			<div id="" style="float: left;">
				<p>当前最热</p>
				<p>当前最热</p>
				<p>当前最热</p>
				<p>当前最热</p>
				<p>当前最热</p>
			</div>
			
		</div>
		
		<!--商品展示-->
		<div>
		    <div class="box">
		        <div class="box1">
					<div class="goodsimg">
						<a href=""><img src="../static/images/img/shoes1.jpg" /></a>
					</div>
					<div class="goodsinfo" style="text-align: center;">
						<p>商品名称：生活用品</p>
						<p>起拍价格：2003.00</p>
						<p>倒计时：</p>
					</div>
				</div>
		        <div class="box1">
					<div class="goodsimg">
						<a href=""><img src="../static/images/img/shoes2.jpg" /></a>
					</div>
					<div class="goodsinfo" style="text-align: center;">
						<p>商品名称：生活用品</p>
						<p>起拍价格：2003.00</p>
						<p>倒计时：</p>
					</div>
				</div>
		        <div class="box1">
					<div class="goodsimg">
						<a href=""><img src="../static/images/img/shoes3.jpg" /></a>
					</div>
					<div class="goodsinfo" style="text-align: center;">
						<p>商品名称：生活用品</p>
						<p>起拍价格：2003.00</p>
						<p>倒计时：</p>
					</div>
				</div>
		        <div class="box1">
					<div class="goodsimg">
						<a href=""><img src="../static/images/img/shoes4.jpg" /></a>
					</div>
					<div class="goodsinfo" style="text-align: center;">
						<p>商品名称：生活用品</p>
						<p>起拍价格：2003.00</p>
						<p>倒计时：</p>
					</div>
				</div>
		        <div class="box1">
					<div class="goodsimg">
						<a href=""><img src="../static/images/img/shoes5.jpg" /></a>
					</div>
					<div class="goodsinfo" style="text-align: center;">
						<p>商品名称：生活用品</p>
						<p>起拍价格：2003.00</p>
						<p>倒计时：</p>
					</div>
				</div>
		    </div>
		</div>
		
		
		
	</body>
</html>
